import { motion } from "framer-motion";
import { workExperienceData } from './data/workExperience';

interface WorkExperienceProps {
  setSelectedWork: (work: any) => void;
}

export const WorkExperience = ({ setSelectedWork }: WorkExperienceProps) => {
  const handleWorkClick = (work: any) => {
    setSelectedWork(work);
    // 阻止页面滚动
    // document.body.style.overflow = 'hidden';
  };

  return (
    <div className="w-full max-w-6xl mx-auto px-4">
      <motion.h2
        className="text-4xl font-bold text-center mb-50 -mt-50"
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
      >
        工作经历
      </motion.h2>
      <div className="relative mt-20">
        {/* 水平时间轴线 */}
        <div className="absolute top-1/2 left-0 right-0 h-1 bg-green-300 transform -translate-y-1/2"></div>

        <div className="flex justify-between relative">
          {workExperienceData.subSections.map((subSection, index) => (
            <div
              key={`work-${subSection.id}`}
              className="relative flex flex-col items-center w-1/5"
            >
              {/* 时间点标记 */}
              <div
                className="w-6 h-6 rounded-full bg-green-500 border-4 border-green-300 cursor-pointer hover:scale-125 transition-transform z-10"
                onClick={() => handleWorkClick(subSection)}
              ></div>

              {/* 上下交替布局的卡片 */}
              <div
                className={`absolute ${
                  index % 2 === 0 ? "bottom-full mb-4" : "top-full mt-4"
                } text-center w-full cursor-pointer px-2`}
                onClick={() => handleWorkClick(subSection)}
              >
                <div className="bg-white p-4 rounded-lg shadow-md hover:shadow-xl transition-shadow">
                  <h3 className="font-bold text-base">{subSection.company}</h3>
                  <p className="text-sm text-gray-600">{subSection.position}</p>
                  <p className="text-xs text-gray-500">{subSection.period}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};